<template>
  <div id="main" class="inner home-inner" header-rander="true">
    <div id="container" class="ucenter-container">
      <div class="user-jobs-area user-jobs-area-box-wrap">
        <div class="chat-history-wrap chat-history-box-wrap">
          <div class="userinfo-banner">
            <div class="container">
              <div class="headbox">
                <div class="sex man"></div>
                <img :src="$main.host + '/api/images/userProfile/' + basicInfo.profile" class="headimg" />
                <span class="vip" v-if="vip">VIP <i class="white-line"></i></span>
              </div>
              <div class="content">
                <div class="username">
                  <span>{{ basicInfo.name }}</span><span class="icon-vip-upgrade" @click="orderVIP" v-if="!vip">升级VIP <i
                      class="white-line"></i></span>
                </div>
                <div class="userinfo">
                  <span>{{ basicInfo.age }}岁</span><i class="vline"></i><span>25年应届生</span><i class="vline"></i><span>{{
                    educationInfo.background }}</span>
                </div>
                <div class="now-state">
                  <div class="ui-select ui-select-single" style="width: 100%">
                    <div tabindex="0" class="ui-select-selection">
                      <input type="hidden" value="3" />
                      <div class="ui-select-inner">
                        <span class="ui-select-selected-value">在校-月内到岗</span><!----><!----><i
                          class="ui-icon-arrow-down"></i>
                      </div>
                    </div>
                    <div class="ui-select-dropdown" style="display: none">
                      <ul class="ui-dropdown-not-found" style="display: none">
                        <li>无匹配数据</li>
                      </ul>
                      <ul class="ui-dropdown-list">
                        <li class="ui-select-item">离校-随时到岗</li>
                        <li class="ui-select-item">在校-暂不考虑</li>
                        <li class="ui-select-item">在校-考虑机会</li>
                        <li class="ui-select-item ui-select-item-selected">在校-月内到岗</li>
                      </ul>
                      <ul class="ui-dropdown-loading" style="display: none">
                        加载中
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="other-info">
                <div class="expect">
                  <span>期望：{{ forjobInfo.position }}</span><span class="salary"></span>
                </div>
                <div class="edu">
                  <span>{{ educationInfo.school }}·{{ educationInfo.major }}</span><span
                    class="edu-time ml-20">2021-2025</span>
                </div>
                <!---->
              </div>
              <div class="edit-container">
                <div class="edit-btn">
                  <router-link class="text" to="/geek/resume">在线简历</router-link>
                  <i class="arrow"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="job-tab user-jobs-tab-nav">
            <div>
              <!-- <span ka="personal_top_added" class="current"
                >能力模型</span> -->
              <span ka="personal_top_submitted" class>已投递<span class="count">0</span></span><span
                ka="personal_top_interview" class>面试<span class="count">0</span></span><span ka="personal_top_interest"
                class>感兴趣<span class="count">0</span></span><!----><!----><!---->
              <div class="next-btn">
                <i class="arrow"></i>
              </div>
            </div>
            <!---->
          </div>
          <ul class="user-jobs-ul">

            <li class="item-boss">
              <div class="item-content">
                <div class="info-header">
                  <div class="btns">
                    <a href="javascript:;" ka="personal_added_continue_a556ed5f63aa75ff0nV53t24E1I~"
                      class="btn btn-startchat">继续沟通</a>
                  </div>
                  <div class="img-box">
                    <img src="https://img.bosszhipin.com/boss/avatar/avatar_7.png" />
                    <h3 class="name">
                      <span>刘小康</span><span class="gray ml-12">经理</span>
                    </h3>
                  </div>
                </div>
                <div class="info-primary flex-reverse info-primary-noninterview">
                  <div class="company-info">
                    <img
                      src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20230726/7bf6f160950405e9034a4cc4de66dc112c40e47f787f3a59c4b60b9e984673519bc13e0d08915026.png" />
                    <div class="text">
                      <b><a
                          href="/gongsi/8bc49a5a26ac81761X1629y0E1Q~.html?ka=personal_added_brand_8bc49a5a26ac81761X1629y0E1Q~"
                          ka="personal_added_brand_8bc49a5a26ac81761X1629y0E1Q~">长沙一否网络科技</a></b>
                      <p class="gray"><span>互联网</span><span>未融资</span><span>0-20人</span></p>
                    </div>
                  </div>
                  <div class="job-info width-500">
                    <div class="job-name">
                      <div class="flex">
                        <a href="/job_detail/e08cff2a6495e29d1X1z2926EFtQ.html?securityId=NOA9ucYEYUZYw-t1EsdaZC9Nqn2FVNOuX26zwK8m2gHi2DL5ATuxGjy9LNi0n90x7t3D2_2Y47SqrP5_e5LeEYP5-NY889XzQo4T778RhD3x8zzE9jkS&amp;ka=personal_added_job_e08cff2a6495e29d1X1z2926EFtQ"
                          class="name"><span class="job-name-text">java后端开发工程师</span><span
                            class="location">[<em>长沙·长沙县·星沙通程广场</em>]</span></a>
                      </div>
                    </div>
                    <p class="gray">
                      8-13K <span>经验不限</span>
                      <span>大专</span>
                    </p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <p class="warm-tip">仅显示最近一年的数据，最多200个</p>

        </div>
      </div>
      <div id="ability_radar_chart">
        <div id="bg22">
          <div id="ability_radar_chart">
            <p class="radar-title">能力雷达图</p>
            <Echarts :option="option" />
          </div>
          <p class="radar-title">综合竞争能力</p>
          <div class="demo-progress">
            综合<el-progress :percentage="78" />
            专业技能<el-progress :percentage="89" :format="format" />
            学习能力<el-progress :percentage="100"  status="success" />
            团队合作<el-progress :percentage="100" status="success" />
            软技能<el-progress :percentage="50" status="exception" />
          </div>
          <p class="radar-title fontSamll">
            需提升时间管理能力，沟通理解能力
          </p>
        </div>
      </div>


    </div>
  </div>
</template>

<script setup lang="ts">
/* 这里通过状态管理库获得数据 */
import { useUserStore } from '@/store/modules/user'
import Echarts from '@/components/reEcharts/index.vue'
import { toRefs } from 'vue'
const userStore = useUserStore()
const { basicInfo, educationInfo, forjobInfo } = userStore.user
const { vip } = toRefs(userStore)
const orderVIP = () => {
  console.log('升级VIP')
  vip.value = true;
}
const option = ref({
  radar: {
    shape: 'square',
    name: {
      textStyle: {
        color: '#4f4f4f',
        fontSize: 16
      }
    },
    indicator: [
      { name: '技术栈熟练度', max: 100 },
      { name: '项目与工作经验', max: 100 },
      { name: '职位匹配度', max: 100 },
      { name: '学习与创新能力', max: 100 },
      { name: '团队协作与沟通能力', max: 100 },
      { name: '职业规划与自我定位', max: 100 }
    ],
    center: ['50%', '50%'],
    radius: '70%',
    axisNameGap: 5,
    splitNumber: 5,
    axisLine: {
      lineStyle: {
        color: '#c0c0c0'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: '#1e83e4'
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(30,131,228,0.3)', 'rgba(30,131,228,0.3)']
      }
    }
  },
  series: [
    {
      name: '能力雷达图',
      type: 'radar',
      symbol: 'circle',
      symbolSize: 6,
      data: [
        {
          value: [90, 80, 70, 85, 90, 70],
          name: '能力雷达图',
          itemStyle: {
            color: 'rgba(255,255,0,3)',
            lineStyle: {
              color: 'rgba(255,255,0,3)'
            }
          },
          label: {
            show: true,
            textStyle: {
              color: 'orange'
            }
          },
          areaStyle: {
            width: 1,
            opacity: 0.5
          }
        }
      ]
    }
  ]
})

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
#bg22 {
  background-color: #fff;
  border-radius: 20px;
  margin: 0 20px;
  width: 360px;
  padding: 20px;
}

/* 最外层外壳 */
.inner {
  width: 1184px;
  margin: 0 auto;
}

#main {
  min-height: calc(100vh - 300px);
}

#container {
  position: relative;
  display: flex;
}

.ucenter-container {
  padding-top: 20px;
}

.inner:after {
  content: '';
  display: block;
  clear: both;
  overflow: hidden;
}

/* .ucenter-container .user-jobs-area {
   margin-right: 300px;
} */

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap {
  background: transparent;
}

/* 头部样式区    */
.userinfo-banner {
  margin-bottom: 12px;
  padding: 20px 0 20px 24px;
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  text-align: center;
}

.userinfo-banner .container {
  display: flex;
  align-items: center;
}

/* 头部——头像样式区*/
.userinfo-banner .headbox {
  position: relative;
  height: 60px;
  width: 60px;
}

.vip {
  display: inline-block;
  width: 80px;
  height: 22px;
  background: url('../../../assets/icons/vip.svg') no-repeat;
  background-size: 80px 22px;
  position: absolute;
  color: #f5ba4c;
  line-height: 22px;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  overflow: hidden;
}

.userinfo-banner .headbox .sex.man {
  background-position: 0 0;
}

.userinfo-banner .headbox .sex {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(https://static.zhipin.com/fe-zhipin-geek/web/chat/v5150/static/images/icons-sex.aceb70bb.png) no-repeat;
  background-size: 14px auto;
  position: absolute;
  right: 0;
  top: 0;
  background-position: 0 -25px;
}

.userinfo-banner .headbox .headimg {
  background-color: #f6f6f8;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

img {
  border: none;
}

/* 头像右部分样式区 */
.userinfo-banner .container .content {
  margin-left: 20px;
  text-align: left;
}

.userinfo-banner .username {
  font-weight: 500;
  font-size: 20px;
  color: #222;
  height: 24px;
  line-height: 24px;
}

.userinfo-banner .username span {
  vertical-align: top;
}

.userinfo-banner .username span {
  vertical-align: top;
}

.userinfo-banner .icon-vip-upgrade {
  margin-left: 8px;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 22px;
  /* background: url(https://img.bosszhipin.com/static/file/2023/vo4ms4ktvp1698820316722.png.webp?x-oss-process=image%2Fresize%2Cw_80%2Ch_22%2Fauto-orient%2C1) */
  /* no-repeat; */
  /* background-image: image-set(url(https://img.bosszhipin.com/static/file/2023/vo4ms4ktvp1698820316722.png.webp?x-oss-process=image/resize,w_80,h_22/auto-orient,1) 1x, url(https://img.bosszhipin.com/static/file/2023/vo4ms4ktvp1698820316722.png.webp?x-oss-process=image/resize,w_160,h_44/auto-orient,1) 2x); */
  background: url('../../../assets/icons/vip-btn.svg') no-repeat;
  background-size: 80px 22px;
  cursor: pointer;
  text-align: center;
  line-height: 22px;
  color: #fff;
  font-size: 12px;
  vertical-align: top;
  overflow: hidden;
}

.white-line {
  animation: light-done 1.5s linear 0s infinite running;
  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 100%, 0));
  bottom: -5px;
  left: 0;
  position: absolute;
  top: -5px;
  transform: rotate(225deg);
  width: 10%;
}

@keyframes light-done {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

div {
  display: block;
  unicode-bidi: isolate;
}

.userinfo-banner .userinfo .vline {
  margin: 0 8px;
}

.ucenter-container .vline {
  display: inline-block;
  width: 1px;
  height: 12px;
  vertical-align: middle;
  background: #e0e0e0;
  margin: 0 10px;
}

.vdot,
.vline {
  display: inline-block;
}

userinfo-banner .userinfo .vline {
  margin: 0 8px;
}

.ucenter-container .vline {
  display: inline-block;
  width: 1px;
  height: 12px;
  vertical-align: middle;
  background: #e0e0e0;
  margin: 0 10px;
}

.vdot,
.vline {
  display: inline-block;
}

.vline {
  width: 1px;
  height: 12px;
  vertical-align: middle;
  background: #e0e0e0;
  margin: 0 10px;
}

.userinfo-banner .now-state {
  margin-top: 12px;
  width: 148px;
}

element.style {
  width: 100%;
}

.ui-select,
.ui-select-selection {
  box-sizing: border-box;
  position: relative;
}

.ui-select {
  display: inline-block;
  width: 300px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
}

.userinfo-banner .other-info {
  flex: 1;
  margin-left: 102px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: left;
}

.userinfo-banner .other-info div {
  height: 20px;
}

.userinfo-banner .other-info .edu span:first-child,
.userinfo-banner .other-info .expect span:first-child,
.userinfo-banner .other-info .work-exp span:first-child {
  max-width: 280px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.userinfo-banner .other-info div span {
  display: inline-block;
  vertical-align: top;
  height: 20px;
  line-height: 20px;
}

.userinfo-banner .other-info .salary {
  margin: -1px 0 0 16px;
  font-size: 16px;
  font-family: kanzhun-Regular;
  font-weight: 500;
  color: #fe574a;
}

.userinfo-banner .other-info div span {
  display: inline-block;
  vertical-align: top;
  height: 20px;
  line-height: 20px;
}

.userinfo-banner .other-info div+div {
  margin-top: 17px;
}

.userinfo-banner .other-info div {
  height: 20px;
}

.userinfo-banner .edit-container {
  display: flex;
}

.userinfo-banner .edit-container .edit-btn {
  margin-top: 4px;
  width: 98px;
  height: 36px;
  background: #f8f8f8;
  border-radius: 18px 0 0 18px;
  border: 1px solid #d4d5d6;
  border-right-color: transparent;
  cursor: pointer;
  transition: all 0.2s linear;
}

.userinfo-banner .edit-container .edit-btn .text {
  color: inherit;
  line-height: 34px;
}

a,
a:hover {
  text-decoration: none;
}

a {
  color: #414a60;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

.userinfo-banner .edit-container .edit-btn .arrow {
  margin-top: -1px;
  display: inline-block;
  width: 4px;
  height: 7px;
  line-height: 34px;
  margin-left: 8px;
  background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -16px / 10px auto no-repeat;
  vertical-align: middle;
}

/* 个人中心导航栏样式区 */
.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-tab-nav {
  position: relative;
  padding: 0 24px;
  background: #fff;
  border-radius: 12px;
}

.chat-history-wrap .job-tab {
  padding: 0 30px;
  line-height: 44px;
}

div {
  display: block;
  unicode-bidi: isolate;
}

.chat-history-wrap .job-tab span.current {
  color: var(--themeColor);
  font-weight: 500;
  position: relative;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.chat-history-wrap .job-tab span.current .count,
.chat-history-wrap .job-tab span:hover {
  color: var(--themeColor);
}

.chat-history-wrap .job-tab span .count {
  margin-left: 4px;
  margin-right: 0;
  color: #b3b3b3;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.chat-history-wrap .job-tab span.current:after {
  content: '';
  position: absolute;
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, var(--themeColor), #00bebd);
  border-radius: 2px;
  left: 50%;
  bottom: -1px;
  margin-left: -14px;
  z-index: 2;
}

:after,
:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.chat-history-wrap .job-tab span .count {
  margin-left: 4px;
  margin-right: 0;
  color: #b3b3b3;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.chat-history-wrap .job-tab span .count {
  margin-left: 4px;
  margin-right: 0;
  color: #b3b3b3;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.chat-history-wrap .job-tab span .count {
  margin-left: 4px;
  margin-right: 0;
  color: #b3b3b3;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.chat-history-wrap .job-tab span {
  position: relative;
  display: inline-block;
  margin-right: 36px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}

.chat-history-wrap .job-tab .next-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  background: #f8f8f8;
  border-radius: 6px;
  cursor: pointer;
}

/* 沟通经历样式区 */

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul {
  padding: 0;
}

.chat-history-wrap ul {
  padding: 10px 30px;
}

li,
ol,
ul {
  list-style: none;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss {
  position: relative;
  padding: 0;
  background: #fff;
  border-radius: 12px;
  transition: all 0.2s linear;
  cursor: pointer;
  margin-top: 12px;
}

.chat-history-wrap ul li {
  padding: 17px 0;
}

li,
ol,
ul {
  list-style: none;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .item-content {
  margin-left: 0;
}

.chat-history-wrap ul li .item-content {
  margin-left: 65px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-header {
  background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
  cursor: default;
}

.chat-history-wrap ul li .item-content .info-header {
  overflow: hidden;
  margin-bottom: 9px;
  min-height: 32px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-header .btns {
  margin-top: 8px;
  margin-right: 24px;
}

.chat-history-wrap ul li .item-content .info-header .btns {
  float: right;
  display: none;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-header .btns .btn {
  background: var(--themeColor);
  border-color: var(--themeColor);
  border-radius: 8px;
}

.chat-history-wrap ul li .item-content .info-header .btns .btn {
  height: 32px;
  line-height: 30px;
  font-size: 13px;
  padding: 0 15px;
  border-radius: 2px;
  color: #fff;
  letter-spacing: 1px;
  background: var(--themeColor);
  border: 1px solid var(--themeColor);
  margin-left: 15px;
}

.btn,
.btn i {
  display: inline-block;
}

.btn {
  margin: 0;
  padding: 9px 15px;
  line-height: 1;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #e3e7ed;
  color: #414a60;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  transition:
    background-color 0.1s linear,
    box-shadow 0.1s linear;
  outline: none;
  user-select: none;
}

a,
a:hover {
  text-decoration: none;
}

a {
  color: #414a60;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .img-box {
  padding: 12px 24px;
  line-height: 24px;
  display: flex;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .img-box img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  border-radius: 50%;
}

img {
  border: none;
}

img {
  border-style: none;
}

.chat-history-wrap ul li .item-content .info-header .name {
  color: #222;
  font-weight: 400;
  font-size: 13px;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.chat-history-wrap ul li .item-content .info-header .name .gray {
  font-size: 13px;
  color: #666;
}

.chat-history-wrap ul li .item-content .info-header .name .ml-12 {
  margin-left: 12px;
}

.gray,
.time {
  color: #9fa3b0;
}

.gray {
  color: #9fa3b0;
}

.gray {
  color: #9fa3b0;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* 公司基本信息样式区 */
.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 0 0 12px 12px;
  cursor: default;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .flex-reverse {
  flex-direction: row-reverse;
}

.chat-history-wrap ul li .item-content .info-primary {
  background-color: #fafafc;
  overflow: hidden;
  padding: 10px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info {
  cursor: default;
  flex: auto;
  display: flex;
  align-items: center;
  text-align: left;
}

.chat-history-wrap ul li .item-content .info-primary.info-primary-noninterview .company-info {
  float: right;
  text-align: right;
  width: 270px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info img {
  margin-top: 0;
  margin-left: 0;
  margin-right: 12px;
  width: 56px;
  height: 56px;
}

.chat-history-wrap ul li .item-content .info-primary.info-primary-noninterview .company-info img {
  width: 42px;
  height: 42px;
  float: right;
  margin-top: 4px;
  margin-left: 10px;
}

img {
  border: none;
}

img {
  border-style: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info .text {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.chat-history-wrap ul li .item-content .info-primary.info-primary-noninterview .company-info .text {
  margin-right: 52px;
}

.chat-history-wrap ul li .item-content .info-primary.info-primary-noninterview .company-info .text b {
  font-weight: 400;
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info .text a {
  color: #222;
}

a,
a:hover {
  text-decoration: none;
}

a {
  color: #414a60;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #fe574a;
  line-height: 22px;
}

.chat-history-wrap ul li .item-content .info-primary.info-primary-noninterview .company-info .text p {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gray,
.time {
  color: #9fa3b0;
}

.gray {
  color: #9fa3b0;
}

.gray {
  color: #9fa3b0;
}

article,
aside,
blockquote,
body,
button,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
section,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info .text .gray span:first-child {
  margin-left: 0;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info .text .gray span {
  margin-right: 8px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span:first-child {
  margin-left: 8px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span {
  padding: 0 8px;
  display: inline-block;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-right: 4px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info .text .gray span {
  margin-right: 8px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span {
  padding: 0 8px;
  display: inline-block;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-right: 4px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .company-info .text .gray span {
  margin-right: 8px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span {
  padding: 0 8px;
  display: inline-block;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-right: 4px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .width-500 {
  width: 500px;
  min-width: 500px;
  max-width: 500px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .job-info .job-name {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
  margin-bottom: 12px;
}

.flex,
.flex-between {
  display: flex;
  align-items: center;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .job-info .job-name a {
  display: flex;
  color: #222;
}

a,
a:hover {
  text-decoration: none;
}

a {
  color: #414a60;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .job-info .job-name .job-name-text {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .job-info .job-name .location {
  margin-left: 10px;
  color: #222;
  display: flex;
  align-items: center;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .job-info .job-name .location em {
  display: inline-block;
  font-style: normal;
  max-width: 156px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #fe574a;
  line-height: 22px;
}

.userinfo-banner .other-info .edu-time {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}

.userinfo-banner .other-info div span {
  display: inline-block;
  vertical-align: top;
  height: 20px;
  line-height: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.chat-history-wrap ul li .item-content .info-primary.info-primary-noninterview .job-info p {
  font-size: 12px;
}

.gray,
.time {
  color: #9fa3b0;
}

.gray {
  color: #9fa3b0;
}

.gray {
  color: #9fa3b0;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span:first-child {
  margin-left: 8px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span {
  padding: 0 8px;
  display: inline-block;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-right: 4px;
}

.ucenter-container .user-jobs-area-box-wrap .chat-history-box-wrap .user-jobs-ul .item-boss .info-primary .gray span {
  padding: 0 8px;
  display: inline-block;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-right: 4px;
}

.ucenter-container .warm-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  line-height: 18px;
  margin-top: 28px;
}

.ucenter-container .warm-tip:before {
  background: linear-gradient(270deg, #ccc, hsla(0, 0%, 80%, 0));
}

.ucenter-container .warm-tip:after,
.ucenter-container .warm-tip:before {
  content: ' ';
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  margin: 0 8px;
}

:after,
:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.ucenter-container .warm-tip:after {
  background: linear-gradient(270deg, hsla(0, 0%, 80%, 0), #ccc);
}

.ucenter-container .warm-tip:after,
.ucenter-container .warm-tip:before {
  content: ' ';
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  margin: 0 8px;
}

:after,
:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#ability_radar_chart {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 100%;
}

.radar-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.radar-title.fontSamll{
  font-size: 16px;
  margin-top: 30px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>
